import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../controllers/home_controller.dart';

import '../../utils/resability.dart';

class HomePage extends StatelessWidget {
  HomePage({super.key});

  final HomeController homeController = Get.put(HomeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bg_color,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(60),
        child: Topbar(),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            //分类排行
            Container(
              width: double.infinity,
              padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    '分类排行',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                  // 填补中间空缺
                  Spacer(),
                  TextButton(
                    onPressed: () {},
                    style: TextButton.styleFrom(padding: EdgeInsets.zero),
                    child: Text(
                      '查看更多 >',
                      style: TextStyle(color: text_color_light, fontSize: 14),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 10),
            SizedBox(
              height: 150,
              child: Obx(() {
                return ListView(
                  scrollDirection: Axis.horizontal,
                  children: homeController.getList(
                    homeController.categorizationData.value,
                  ),
                );
              }),
            ),
            Container(
              width: double.infinity,
              margin: EdgeInsets.fromLTRB(30, 0, 30, 10),
              height: 1,
              color: bg_color_light,
            ),

            //作者排行
            Container(
              width: double.infinity,
              padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    '作者排行',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                  // 填补中间空缺
                  Spacer(),
                  TextButton(
                    onPressed: () {},
                    style: TextButton.styleFrom(padding: EdgeInsets.zero),
                    child: Text(
                      '查看更多 >',
                      style: TextStyle(color: text_color_light, fontSize: 14),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 10),
            SizedBox(
              height: 150,
              child: Obx(() {
                return ListView(
                  scrollDirection: Axis.horizontal,
                  children: homeController.getList(
                    homeController.createrData.value,
                  ),
                );
              }),
            ),
            Container(
              width: double.infinity,
              margin: EdgeInsets.fromLTRB(30, 0, 30, 10),
              height: 1,
              color: bg_color_light,
            ),

            //新发布
            Container(
              width: double.infinity,
              padding: EdgeInsets.fromLTRB(30, 0, 30, 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    '新发布',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                  // 填补中间空缺
                  Spacer(),
                  TextButton(
                    onPressed: () {},
                    style: TextButton.styleFrom(padding: EdgeInsets.zero),
                    child: Text(
                      '查看更多 >',
                      style: TextStyle(color: text_color_light, fontSize: 14),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
              child: Obx(
                () => homeController.getBookList(homeController.bookdata.value),
              ),
            ),
            Container(
              width: double.infinity,
              margin: EdgeInsets.fromLTRB(30, 0, 30, 10),
              height: 1,
              color: bg_color_light,
            ),

            // 热门搜索
            Container(
              width: double.infinity,
              padding: EdgeInsets.fromLTRB(30, 10, 30, 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    '热门搜索',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
              child: Wrap(
                spacing: 15,
                runSpacing: 5,
                children: [
                  OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                      side: BorderSide(color: Colors.green),
                    ),
                    child: Text(
                      '2024排行榜',
                      style: TextStyle(color: Colors.green, fontSize: 15),
                    ),
                  ),
                  OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                      side: BorderSide(color: Colors.red),
                    ),
                    child: Text(
                      '2025排行榜',
                      style: TextStyle(color: Colors.red, fontSize: 15),
                    ),
                  ),
                  OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                      side: BorderSide(color: Colors.yellow),
                    ),
                    child: Text(
                      '职场热门',
                      style: TextStyle(color: Colors.yellow, fontSize: 15),
                    ),
                  ),
                  OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                      side: BorderSide(color: Colors.purple),
                    ),
                    child: Text(
                      '都市言情',
                      style: TextStyle(color: Colors.purple, fontSize: 15),
                    ),
                  ),
                  OutlinedButton(
                    onPressed: () {},
                    style: OutlinedButton.styleFrom(
                      side: BorderSide(color: Colors.deepPurple),
                    ),
                    child: Text(
                      '哈弗大学经济管理类',
                      style: TextStyle(color: Colors.deepPurple, fontSize: 15),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              margin: EdgeInsets.fromLTRB(30, 20, 30, 10),
              height: 1,
              color: bg_color_light,
            ),

            //热销榜
            Container(
              width: double.infinity,
              padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    '热销榜',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                  // 填补中间空缺
                  Spacer(),
                  TextButton(
                    onPressed: () {},
                    style: TextButton.styleFrom(padding: EdgeInsets.zero),
                    child: Text(
                      '查看更多 >',
                      style: TextStyle(color: text_color_light, fontSize: 14),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              width: double.infinity,
              height: 230,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  SizedBox(width: 30),
                  Stack(
                    alignment: Alignment.topLeft,
                    children: [
                      Container(
                        width: 300,
                        height: 150,
                        margin: EdgeInsets.only(top: 20),
                        decoration: BoxDecoration(
                          color: bg_color_light,
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                      Container(
                        width: 300,
                        padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(10),
                              child: Image.asset(
                                'assets/images/fengmian/1.png',
                                width: 100,
                              ),
                            ),
                            SizedBox(width: 15),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  SizedBox(height: 32),
                                  Text(
                                    '大明王朝1566',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                    ),
                                  ),
                                  Text(
                                    '张黎',
                                    style: TextStyle(
                                      color: text_color_light,
                                      fontSize: 13,
                                    ),
                                  ),
                                  Divider(color: text_color),

                                  Text(
                                    '嘉靖三十九年，贪墨横行、民不聊生。奸臣严嵩党羽密布、权倾朝野，清官海瑞不惧强权，敢于向腐朽封建的皇权发起挑战。皇帝朱厚熜练道修玄二十载，',
                                    maxLines: 3,
                                    style: TextStyle(
                                      color: text_color_light,
                                      fontSize: 13,
                                    ),
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(width: 15),
                          ],
                        ),
                      ),
                    ],
                  ),
                  SizedBox(width: 20),
                  Stack(
                    alignment: Alignment.topLeft,
                    children: [
                      Container(
                        width: 300,
                        height: 150,
                        margin: EdgeInsets.only(top: 20),
                        decoration: BoxDecoration(
                          color: bg_color_light,
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                      Container(
                        width: 300,
                        padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(10),
                              child: Image.asset(
                                'assets/images/fengmian/1.png',
                                width: 100,
                              ),
                            ),
                            SizedBox(width: 15),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  SizedBox(height: 32),
                                  Text(
                                    '大明王朝1566',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                    ),
                                  ),
                                  Text(
                                    '张黎',
                                    style: TextStyle(
                                      color: text_color_light,
                                      fontSize: 13,
                                    ),
                                  ),
                                  Divider(color: text_color),

                                  Text(
                                    '嘉靖三十九年，贪墨横行、民不聊生。奸臣严嵩党羽密布、权倾朝野，清官海瑞不惧强权，敢于向腐朽封建的皇权发起挑战。皇帝朱厚熜练道修玄二十载，',
                                    maxLines: 3,
                                    style: TextStyle(
                                      color: text_color_light,
                                      fontSize: 13,
                                    ),
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ],
                              ),
                            ),
                            SizedBox(width: 15),
                          ],
                        ),
                      ),
                    ],
                  ),
                  SizedBox(width: 30),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

//bar
class Topbar extends StatelessWidget {
  const Topbar({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 0),
      child: AppBar(
        backgroundColor: bg_color,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(width: 10),
            Flexible(
              flex: 1,
              child: Expanded(
                child: OutlinedButton(
                  onPressed: () {},
                  style: OutlinedButton.styleFrom(
                    padding: EdgeInsets.only(left: 15),
                    backgroundColor: bg_color_light,
                    side: BorderSide.none,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Icon(Icons.search_outlined, color: text_color_light),
                      SizedBox(width: 5),
                      Text('搜索...', style: TextStyle(color: text_color_light)),
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(width: 10),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.more_horiz_outlined, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}
